본문으로 건너뛰기

상태 업데이트 함수의 비동기 특성과 이전 상태 활용, 상태 초기화

React에서 상태 업데이트 함수는 매우 중요한 개념입니다. 이 함수의 비동기 특성과 이를 활용하여 이전 상태를 참조하는 방법, 상태를 초기화하는 방법을 알아보겠습니다.

상태 업데이트 함수의 비동기 특성​

React에서 상태를 업데이트할 때 사용하는 함수는 비동기적으로 동작합니다. 이는 상태 업데이트 요청이 즉시 반영되지 않고, React가 여러 상태 업데이트 요청을 하나의 배치로 처리하여 성능을 최적화하기 위해서입니다.

비동기 특성 이해하기​

다음은 비동기 특성을 이해하는 데 도움이 되는 예제입니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

위 예제에서 setCount 함수를 세 번 호출하지만, count 값은 1씩만 증가합니다. 이는 setCount가 비동기적으로 동작하기 때문입니다. count 값이 바로 업데이트되지 않고, 최종적으로 한 번의 업데이트로 처리됩니다.

이전 상태 활용​

비동기적인 상태 업데이트 특성을 제대로 활용하려면, 상태 업데이트 함수에 함수를 전달하여 이전 상태를 기반으로 새로운 상태를 계산할 수 있습니다. 이를 통해 상태가 정확하게 업데이트되도록 할 수 있습니다.

이전 상태 활용 예제​

다음은 이전 상태를 활용하여 상태를 정확하게 업데이트하는 예제입니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

위 예제에서 setCount 함수에 전달된 함수는 이전 상태인 prevCount를 인자로 받아 새로운 상태를 반환합니다. 이렇게 하면 상태가 세 번 정확하게 업데이트되어 count 값이 3씩 증가합니다.

상태 초기화​

상태를 초기화하는 것은 상태 관리에서 중요한 부분입니다. 상태를 초기화하려면 상태를 업데이트하는 함수에 초기값을 전달하면 됩니다.

상태 초기화 예제​

다음은 버튼 클릭 시 상태를 초기화하는 예제입니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const reset = () => {
    setCount(0);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Counter;

위 예제에서 reset 함수는 setCount 함수를 사용하여 count 값을 0으로 초기화합니다. 버튼을 클릭하면 상태가 초기화됩니다.

더 알아보기​

  • 상태 관리의 중요성: 상태 관리가 왜 중요한지, 다양한 상태 관리 기법을 알아보세요.
  • useEffect와 상태 업데이트: 상태 업데이트와 함께 자주 사용되는 useEffect 훅의 활용 방법을 살펴보세요.
  • React의 비동기 처리: React의 비동기 처리 방식과 그 이점을 더 깊이 이해해 보세요.

내용 요약과 다음 주제​

React의 상태 업데이트 함수는 비동기적으로 동작하며, 이전 상태를 참조하여 상태를 정확하게 업데이트할 수 있습니다. 또한, 상태 초기화를 통해 초기값을 설정할 수 있습니다. 다음 주제인 Props 소개와 좋은 Props 이름에서는 React 컴포넌트 간 데이터 전달 방법과 효과적인 Props 사용법에 대해 다룹니다.